<template>
  <div class="content-body" :style="borderStyle">
    <div class="query-custom">
      <div class="query-body" style="height: 50px">
        <input
          v-model="form.blurry"
          class="query-input"
          autocomplete="off"
          placeholder="快速探索"
        >
        <span
          class="query-button"
          @click="queryEntity"
        ><i
          class="el-icon-search"
        /></span>
      </div>
      <div v-if="isBack===true" class="call-back" @click="back">返回</div>
    </div>
    <div v-if="isShow" class="query-item">
      <query-list
        v-for="item in query"
        :key="item.sjx"
        :sjx="item"
        @callBack="queryBack"
      />
    </div>
    <div class="content-ul">
      <div
        v-for="(item, index) in dataList"
        :key="'server-' + index"
        class="custom-right-li"
        @click="openEntity(item)"
      >
        <el-card shadow="hover" style="height: 100%">
          <div class="right-li-body">
            <div class="custom-li-image">
              <el-image
                lazy
                class="custom-image"
                :src="baseURL+item[column[0].image]"
              />
            </div>
            <div class="custom-li-title">
              <div class="li-line">{{ item[column[0].title] }}</div>
              <div class="li-line custom-font">
                {{
                  (item[column[0].left1] === undefined ? '' : item[column[0].left1])

                }}
                {{
                  (item[column[0].left2] === undefined ? '' : ('/' + item[column[0].left2]))
                }}
                {{
                  (item[column[0].left3] === undefined ? '' :( '/' +item[column[0].left3]))
                }}
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { more } from '@/mixins/template'
import QueryList from './common/queryList'
import { layout } from '@/mixins/layout'
export default {
  name: 'PcMoreImageListTempV4Vue',
  components: { QueryList },
  mixins: [more, layout],
  data() {
    return {
      form: {
        page: 1,
        size: 20000, // 控制更多页面显示数量2
        cid: null,
        title: ''
      }
    }
  }
}
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--edu-bk-100);
}
.query-custom {
  width: 100%;
  height: 70px;
  flex: 0 1 auto;
  padding: 10px 20%;
  box-sizing: border-box;
  position: relative;
}
.call-back {
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  border-radius: 4px;
  background-color: var(--edu-hover-bg-100);
  color: var(--edu-hover-color-200);
  font-size: 0.9rem;
  top: 0;
  right: 0;
}
.query-item {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--edu-border-100);
}
.content-ul {
  width: 100%;
  height: inherit;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  min-height: 600px;
}
.query-body {
  width: 100%;
  height: 100%;
  display: flex;
  line-height: 50px;
  flex-flow: row nowrap;
  border: 1px solid var(--edu-border-100);
  border-radius: 25px;
  padding: 5px 60px 5px 25px;
  box-sizing: border-box;
  position: relative;
}
.active {
  border: 1px solid var(--edu-hover-text-100);
}
.query-input,
.query-input:focus {
  border: none;
  width: 100%;
  outline: none;
  background-color: var(--edu-bk-100);
  color: var(--edu-text-200);
}
.query-button {
  position: absolute;
  right: 0;
  top: -1px;
  width: 60px;
  height: 50px;
  line-height: 50px;
  border-radius: 0 25px 25px 0;
  background-color: var(--edu-hover-bg-100);
  text-align: center;
  cursor: pointer;
  color: var(--edu-hover-color-200);
  font-size: 25px;
  font-weight: bolder;
}
.query-button:hover {
  background-color: var(--edu-hover-bg-100);
}
.custom-right-li {
  cursor: pointer;
}
@media screen and (min-width: 1200px) {
  .custom-right-li {
    width: 14.28%;
    height: 120px;
    align-content: flex-start;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .custom-li-image {
    height: 50px;
    width: 100%;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
  }
  .custom-image {
    width: 40px;
  }
  .custom-li-title {
    text-align: center;
    line-height: 20px;
    font-size: 13px;
  }
  /deep/.el-card{
    background-color: var(--edu-bk-200);
    .el-card__body {
      padding: 5px;
    }
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .custom-right-li {
    width: 20%;
    height: 120px;
    align-content: flex-start;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .custom-li-image {
    height: 50px;
    width: 100%;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
  }
  .custom-image {
    width: 40px;
  }
  .custom-li-title {
    text-align: center;
    line-height: 20px;
    font-size: 13px;
  }
  /deep/.el-card{
    background-color: var(--edu-bk-200);
    .el-card__body {
      padding: 5px;
    }
  }
}
@media screen and (max-width: 1024px) {
  .custom-right-li {
    width: 25%;
    height: 120px;
    align-content: flex-start;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .custom-li-image {
    height: 50px;
    width: 100%;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
  }
  .custom-image {
    width: 40px;
  }
  .custom-li-title {
    text-align: center;
    line-height: 20px;
    font-size: 13px;
  }
  /deep/.el-card{
    background-color: var(--edu-bk-200);
    .el-card__body {
      padding: 5px;
    }
  }
}
</style>
